import React,{useRef} from 'react'
import { SearchOutlined } from "@ant-design/icons";
import "./style.css"
import Multiplex from '../../../../CreateImages/Multiplex/index'
const Index:React.FC = () => {
  let WrittenWordsList=[
    {
    title:"特效文字",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"节日热点",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
    {
    title:"带货图文",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"plog花字",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
    {
    title:"促销优惠券",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"喜报战报",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"文艺娱乐",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"公众号标题",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"引导关注",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"按钮印章",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"社交媒体",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"教育培训",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"招聘专题",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"问卷调查",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"通知通告",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"直播间挂件",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/359f6690-d898-410d-914f-f818337ee8d4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/16/4155a84d-4c3e-4fae-8798-86d6fa9debf8_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/e05b95b8-70ad-4f43-ae9c-f957017e6e21_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/a3c7d991-19a8-4e60-9ee3-bfd38d76ed6a_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/04/18/156e53de-2c15-4e8d-9da9-85f8313c49b4_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  {
    title:"占位信息",
    imgs:[
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/fe2f3fd7-4838-460c-bb25-08d43cf6c34b_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/4b90fda7-8ee3-406e-8018-7cb41c16dcfc_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/c4dbc7b8-ad3a-4e64-a281-8c2b6de70478_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp',
      'https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/157a0e0c-df45-43d3-8992-491b56d5fe32_thumb?imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp'
    ]
  },
  ]

  const containerRef = useRef<HTMLDivElement>(null); // 创建一个React的ref来访问DOM元素
      // 向左滚动函数
    const scrollLeft = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: -400, behavior: 'smooth' }); // 使用scrollBy方法平滑地向左滚动
        }
    };

    // 向右滚动函数
    const scrollRight = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: 400, behavior: 'smooth' }); // 使用scrollBy方法平滑地向右滚动
        }
    };
  return (
    <div className='WrittenWords'>
      <div className="headerInpas">
        <SearchOutlined /><input type="text" placeholder='搜索文字' />
      </div>
      <div className="ckcBoxList">
        {WrittenWordsList.map((item, index) => (
        <div key={index} style={{ marginBottom: '20px' }}>
          <h3>{item.title} <span>全部</span></h3>
          <div style={{ display: 'flex' }}>
            {item.imgs.map((img, imgIndex) => ( 
              <div className='ckcimgs'>
                <button onClick={scrollLeft} className="q-arrow-button1">◀</button> {/* 左箭头按钮 */}
                <img
                key={imgIndex}
                src={img}
                alt={item.title}
                style={{ width: '90px', height: 'auto' }}
              />
              <button onClick={scrollRight} className="q-arrow-button2">▶</button> {/* 右箭头按钮 */}
              </div>
            )
            )}
          </div>
        </div>
      ))}
      </div>
    </div>
  )
}

export default Index
